import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import './style.scss';
import { actionCreators } from './store';
import ScrollCustom  from '../../components/scrollCustom';

class MusicScore extends PureComponent {
    render() {
        const { selectFlag, scoreData, collectData, selectScoreNavigate, enshrineScoreToLibrary, removalScoreFromLibrary, acquireMusicScoreData } = this.props;
        return (
            <div className="musicScore">
                <div className="scoreNavigate">
                    <span onClick = {
                        () => selectScoreNavigate(false)
                    }>曲谱库</span>
                    <span onClick = {
                        () => selectScoreNavigate(true)
                    }>我的曲谱</span>
                    <div className={(selectFlag === true)? 'active': ''}></div>
                </div>
                <div className="scoreGrabble" onClick = {
                    () => this.props.history.push({
                        pathname: '/scoreSearch'
                    })
                }>
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/search@2x.png" alt="" />
                </div>
                <div className="scoreContent">
                    {
                        (()=> {
                            if (!selectFlag) {
                                return (
                                    <ScrollCustom
                                        acquireMusicScoreData={acquireMusicScoreData}
                                    >
                                        {
                                            scoreData.map((item, index) => {
                                                return (
                                                    <div className="scoreCell" key={item.ID} onClick = {
                                                        // 隐式传参
                                                        () => this.props.history.push({
                                                            pathname: '/scoreParticulars',
                                                            state: {
                                                                score_id: item.ID
                                                            }
                                                        })
                                                    }>
                                                        <div className="cellLeft">
                                                            {
                                                                (() => {
                                                                    if (item.SINGER_IMG) {
                                                                        return (
                                                                            <img src={item.SINGER_IMG} alt="" />
                                                                        )
                                                                    } else {
                                                                        return (
                                                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png" alt="" />
                                                                        )
                                                                    }
                                                                })()
                                                            }
                                                        </div>
                                                        <div className="cellRight">
                                                            <div><div className="scoreName">{item.NAME}</div></div>
                                                            <div>
                                                                <div className="scoreSinger">{item.SINGER}</div>
                                                                <div className="scoreHot">
                                                                    <div className="hotIcon">
                                                                        <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png" alt="" />
                                                                    </div>
                                                                    <div className="hotCount">{item.HOT? item.HOT: 0}</div>
                                                                </div>
                                                                {
                                                                    (() => {
                                                                        if (!item.FAVORITE_ID) {
                                                                            return (
                                                                                <div className="scoreCollect" onClick = {
                                                                                    (e) => enshrineScoreToLibrary(e, item, index)
                                                                                }>
                                                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png" alt="" />
                                                                                </div>
                                                                            )
                                                                        } else {
                                                                            return (
                                                                                <div className="scoreCollect" onClick = {
                                                                                    (e) => removalScoreFromLibrary(e, item, index, 1)
                                                                                }>
                                                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png" alt="" />
                                                                                </div>
                                                                            )
                                                                        }
                                                                    })()
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </ScrollCustom>
                                )
                            } else {
                                if (JSON.stringify(collectData) !== '[]') {
                                    return (
                                        collectData.map((item, index) => {
                                            return (
                                                <div className="scoreCell" key={item.ID} onClick = {
                                                    // 隐式传参
                                                    () => this.props.history.push({
                                                        pathname: '/scoreParticulars',
                                                        state: {
                                                            score_id: item.ID
                                                        }
                                                    })
                                                }>
                                                    <div className="cellLeft">
                                                        {
                                                            (() => {
                                                                if (item.SINGER_IMG) {
                                                                    return (
                                                                        <img src={item.SINGER_IMG} alt="" />
                                                                    )
                                                                } else {
                                                                    return (
                                                                        <img src="http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png" alt="" />
                                                                    )
                                                                }
                                                            })()
                                                        }    
                                                    </div>
                                                    <div className="cellRight">
                                                        <div>
                                                            <div className="scoreName">{item.NAME}</div>
                                                        </div>
                                                        <div>
                                                            <div className="scoreSinger">{item.SINGER}</div>
                                                            <div className="scoreHot">
                                                                <div className="hotIcon">
                                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png" alt="" />
                                                                </div>
                                                                <div className="hotCount">{item.HOT? item.HOT: 0}</div>
                                                            </div>
                                                            <div className="scoreCollect" onClick = {
                                                                (e) => removalScoreFromLibrary(e, item, index, 2)
                                                            }>
                                                                <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png" alt="" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    )
                                } else {
                                    return (
                                        <div className="scoreNone">
                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/default_04@2x.png" alt="" />
                                            <div className="scoreAdd" onClick = {
                                                () => selectScoreNavigate(false)
                                            }>添加曲谱</div>
                                        </div>
                                    )
                                }   
                            }
                        })()
                    }
                </div> 

                
                    {/* <div class="scoreLoading" v-if="!moreLibrary">没有更多~</div> */}
            </div>
        )
    }

    componentDidMount() {
        // 选择  曲谱导航 
        this.props.selectScoreNavigate(this.props.selectFlag)
	}
}

const mapState = (state) => ({
    scoreData: state.musicScore? state.musicScore.scoreData: [],
    collectData: state.musicScore? state.musicScore.collectData: [],
    selectFlag: state.musicScore? state.musicScore.selectFlag: false
});

const mapDispatch = (dispatch) => ({
	acquireMusicScoreData() {
        console.log('acquireMusicScoreData')
        const page = 0
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
        dispatch(actionCreators.acquireMusicScoreData(page, open_id, union_id));
    },
    acquireCollectScoreData() {
        const page = 0
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
		dispatch(actionCreators.acquireScoreCollectData(page, open_id, union_id));
    },
    selectScoreNavigate(flag) {
        if (!flag) {
            // 获取 曲谱库 数据
            mapDispatch(dispatch).acquireMusicScoreData()
        } else {
            // 获取 我的曲谱 数据
            mapDispatch(dispatch).acquireCollectScoreData()
        }
        window.scrollTo(0, 0);
        dispatch(actionCreators.selectScoreNavigate(flag));
    },
    // 收藏 图谱到曲谱库
    enshrineScoreToLibrary(e, item, index) {
        // 阻止合成事件间的冒泡
        e.stopPropagation();
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
        dispatch(actionCreators.enshrineScoreToLibrary(item, index, open_id, union_id))
    },
    // 移除 图谱于曲谱库
    removalScoreFromLibrary(e, item, index, type) {
        // 阻止合成事件间的冒泡
        e.stopPropagation();
        const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w'
		const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk'
        dispatch(actionCreators.removalScoreFromLibrary(item, index, open_id, union_id, type))
    }
});

export default connect(mapState, mapDispatch)(withRouter(MusicScore));